<template>
  <div class="edit">
    <div id="edit-box"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import E from "wangeditor";
import AlertMenu from "../utils/edit";
import SelectPersonList from "../common/edit-person-select";
const { $ } = E;
@Component
export default class WangEditor extends Vue {
  // @Prop() private list!: Array<any>;
  // 菜单 key ，各个菜单不能重复
  menuKey = "alertMenuKey";

  mounted() {
    const editor = new E("#edit-box");
    // const aaa = new AlertMenu(editor);
    // 注册菜单
    editor.menus.extend(this.menuKey, AlertMenu);
    // console.log(new SelectPersonList(this.list));
    // 配置 onchange 回调函数
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    editor.config.onchange = (newHtml: any) => {
      console.log("change 之后最新的 html", newHtml, editor.txt.text());
    };
    // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)

    // 默认情况下，显示所有菜单
    // editor.config.menus = ["bold", "link", "list"];
    editor.config.menus = editor.config.menus.concat(this.menuKey);
    editor.create();
    editor.txt.append("<p>追加的内容</p>");
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
